<template>
  <custom-layout>
    <div class="checkout-container">
      <ul class="checkout-root">
        <li v-for="value in priceObject.priceMap" :key="value[0]" class="checkout-item">
          <div class="checkout-title">
            {{ value[1].title }}:
          </div>
          <div class="checkout-unit-price">
            {{ value[1].unitPrice }}
          </div>
          <div class="checkout-number">
            <button class="change-button minus-button" @click="delGoods(value[0])">-</button>
            {{ value[1].count }}
            <button class="change-button add-button" @click="addGoods(value[0])">+</button>
          </div>
          <div class="checkout-total-price">
            ${{ value[1].totalPrice }}
          </div>
        </li>
      </ul>
      <div class="checkout-info">
        <div class="checkout-all-total-price">Total price: ${{ priceObject.totalPrice }}</div>
        <button class="checkout-button" @click="checkout">Checkout</button>
      </div>
      <div class="checkout-success" v-show="showSuccessMessage"></div>
      <div class="checkout-failed" v-show="showFailedMessage"></div>
    </div>
  </custom-layout>
</template>

<script lang="ts">
export default {
  name: "Checkout"
}
</script>

<style lang="less" scoped>
@import "../vars";
.checkout-container {
  padding: 1em;
  display: flex;
  flex-direction: column;
}
.checkout-root {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em;
  margin: 0;
  padding: 0;
}
.checkout-item {
  display: flex;
  list-style-type: none;
  background-color: @gray-100;
  padding: 1em;
  border-radius: 1em;
}
.checkout-title {
  font-size: 1.5em;
}
.checkout-number {
  display: flex;
  margin-top: auto;
  &:before {
    content: "\00D7";
  }
  &:after {
    content: "=";
  }
}
.change-button {
  display: block;
  padding: 0;
  border: 0;
  line-height: 1;
  padding: 0.25em;
  font-size: 0.9em;
  margin-left: 0.125em;
  margin-right: 0.125em;
  background-color: @gray-200;
  cursor: pointer;
  &:hover {
    background-color: @gray-300;
  }
  &:active {
    background-color: @gray-400;
  }
}
.checkout-unit-price {
  margin-left: auto;
  margin-top: auto;
  &:before {
    content: "$";
  }
}
.checkout-total-price {
  color: @cyan-600;
  font-size: 1.25em;
  margin-top: auto;
}
.checkout-all-total-price {
  font-size: 1.5em;
}
.checkout-button {
  display: block;
  padding: 0;
  border: 0;
  line-height: 1;
  padding: 0.5em;
  font-size: 1.25em;
  margin-left: 0.125em;
  margin-right: 0.125em;
  background-color: @gray-200;
  cursor: pointer;
  &:hover {
    background-color: @gray-300;
  }
  &:active {
    background-color: @gray-400;
  }
}
.checkout-info {
  margin-left: auto;
  display: flex;
}
.checkout-success {
  color: @green-400;
  font-size: 1.25em;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  &:after {
    content: "Success"
  }
  margin-left: auto;
}
.checkout-failed {
  color: @red-500;
  font-size: 1.25em;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  &:after {
    content: "Failed, please retry"
  }
  margin-left: auto;
}
</style>
<script setup lang="ts">
import CustomLayout from "../components/CustomLayout.vue"
import { useRouter } from "vue-router"
import { computed, reactive, ref } from "vue"
import { useStore, PriceObject } from "../store/main"
import { doCheckout } from '../network/main'
const store = useStore()
const router = useRouter()
const priceObject = computed<PriceObject>(() => store.getters.priceObject)
const showSuccessMessage = ref(false)
const showFailedMessage = ref(false)
console.log(priceObject)

if (store.state.thingsBuy.length == 0) {
  router.back()
}
function delGoods(index: number) {
  store.commit("deleteOldThings", index)
}
function addGoods(index: number) {
  store.commit("buyNewThings", index)
}
async function checkout() {
  const price: PriceObject = store.getters.priceObject
  const result = await doCheckout(price, store.state.userId!, store.state.loginToken!)
  if (result.success) {
    store.commit("clearThingsBuy")
    showSuccessMessage.value = true
    setTimeout(() => showSuccessMessage.value = false, 5000)
  } else {
    showFailedMessage.value = true

  }
}
</script>